<template>
  <div class="map_wrapper" style="color: red;font-size: 30px;font-weight: bold;width: 100%;height: 100%;">
    <div class="map_inner" >
      <div id="my_map" style="width: 300px;height: 300px;border: 1px solid blue;">

      </div>
      <div @click="add">添加</div>
      <div @click="del">删除{{cur_index}}</div>
      <div @click="loadMap">加载地图</div>
      <div @click="delMap">--销毁地图--</div>
	  <div @click="">{{debug}}</div>
    </div>
  </div>
</template>

<script>
  // 设置一个图标对象

  // var allowCollision = false;
  // var layer = new AMap.LabelsLayer({
  //   zooms: [3, 20],
  //   zIndex: 1000,
  //   // collision: false,
  //   // 设置 allowCollision：true，可以让标注避让用户的标注
  //   allowCollision,
  // });
  export default {
    name: "Map",
    props: ['add_marker'],
    data(){
      return {
        cur_index:0,
        map: null,
        markers: [],
        icon: null,
        debug: 'debug'
      }
    },
    mounted() {
      this.icon = {
        // 图标类型，现阶段只支持 image 类型
        type: 'image',
        // 图片 url
        // image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        // 图片尺寸
        size: [20, 20],
        // 图片相对 position 的锚点，默认为 bottom-center
        anchor: 'center',
      };
      console.debug("mountde")
    },
    methods: {
	  upIndex(){
		this.cur_index++
		console.log("加加index")
		console.debug("加加index---")
	  },
      loadMap(){
        if (this.map != null){
          console.debug("mounted map is not null")
          this.debug = 'mounted map is not null load'
          this.map.clearMap();
          var textStyle = {
            fontSize: 12,
            fontWeight: 'normal',
            fillColor: '#22886f',
            strokeColor: '#fff',
            strokeWidth: 2,
            fold: true,
            padding: '2, 5',
          };
          var LabelsData = []
        }else {
          console.debug(" map is null")
          this.debug = 'mounted map is null load'
          this.map = new AMap.Map('my_map', {
            zoom: 11.8,
            center: [116.469881, 39.993599],
            showIndoorMap: false,
          });
          this.debug = 'map load end '
        }
      },
      showInfoM(e){
        console.debug("点击标志物"+e.target.getExtData().index)
      },
      del(){
        if (this.cur_index > 0){
          this.map.remove(this.markers[this.cur_index-1])
          this.markers.pop(this.markers[this.cur_index-1])
          this.cur_index--
          this.map.setFitView();
        }
      },
      delMap(){
        this.map.destroy()
        this.map = null
        console.debug("delMap")
        if (this.map == null){
          console.debug("map null")
        }else {
          console.debug("map not null")
        }
      },
      add(){
        // 图层添加到地图
        var my_marker = {
          name: '自提点1', position: [116.461009+this.cur_index*0.1, 39.991443], zooms: [1, 20], opacity: 1, zIndex: 1000, fold: false, icon:this.icon,
            text: {
              // 要展示的文字内容
              content: '',
              // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
              direction: 'right',
              // 在 direction 基础上的偏移量
              offset: [-20, -5],
              // 文字样式
              style: {fontSize: 12, fillColor: '#22886f', strokeColor: '#fff', strokeWidth: 2, fold: true, padding: '2, 5',}
            }, collision:false, allowCollision: false
        }
        my_marker.extData = {
          index: this.cur_index,
          data: "2121fsd:"+this.cur_index
        };
        var labelMarker = new AMap.LabelMarker(my_marker);
        // var labelMarker = new AMap.Marker(my_marker);
        labelMarker.on('click', this.showInfoM);
        this.markers.push(labelMarker);
        this.map.add(labelMarker);
        this.cur_index++
        this.map.setFitView();
      }//add end
    },
    watch: {

    }
  }
</script>

<style scoped>

</style>